support keyboard parameter modification#31
support keyboard parameter modification#31QiuShuiBai wants to merge 4 commits intoLeaVerou:gh-pagesfrom
Conversation
There was a problem hiding this comment.
Hey, thanks for contributing! Huge +1 on the functionality, I’ve wanted this myself as well!
Wrt implementation, I don’t think we actually need contentEditable here and it introduces a lot of complexity. I can see two solutions:
- Use separate
<input type=number>elements and just apply the right text colors. Then you get the step behavior for free and you only need to code any modifiers. - Use a single input for all four numbers, and use the CSS Custom Highlight API to apply the colors.
I’m fine with both, up to you!
|
Hi, I'm sorry for changing this only now. Currently Use separate elements to implement. Please review : ) |
|
No worries, thanks for working on it! I still see a lot of the old code however? |
| var inputList = $$('.param'); | ||
| var hiddenTextList = $$('.hidden-text'); | ||
| function onInput(input, index) { | ||
| hiddenTextList[index].innerHTML = input.value || 0; |
There was a problem hiding this comment.
need to update the hidden text to get the correct width
| } | ||
| function onKeydown(event, input) { | ||
| if (event.key === '-' && input.value[0] === '-') { | ||
| event.preventDefault(); |
There was a problem hiding this comment.
Prevent adding another minus sign because when there are two minus signs, the value of becomes an empty string.
| } | ||
|
|
||
| function onBlur(input, index) { | ||
| var xy = input.value; |
The contenteditable.js file is required, and I’ve added a comment in the diff to explain it. |
2 participants
Just like this